﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>wangHighLighter demo</title>
    <style type="text/css">
        body {
           font-size:13px;
           line-height:22px;
           color:#333333; 
        }
    </style>
</head>
<body>
    <h2>wangHighLighter demo</h2>
    <div id="optionsDiv">
        语言：
        <select id="sltLang">
        </select>
        &nbsp;&nbsp;
        主题：
        <select id="sltTheme">
        </select>
    </div>
    <textarea id="txt1" rows="10" cols="10" style="width:100%;"></textarea>
    <button id="btn1" type="button">转换</button>
    <hr />
    <div id="div1"></div>

    <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
    <!--<script src="js/wangHighLighter-1.0.0.js" type="text/javascript"></script>-->
    <script src="js/wangHighLighter-1.0.0-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var $sltLang = $('#sltLang'),
                langArray = wangHighLighter.getLangArray(),
                $sltTheme = $('#sltTheme'),
                themeArray = wangHighLighter.getThemeArray(),
                item,

                $txt1 = $('#txt1'),
                $div1 = $('#div1'),
                $btn1 = $('#btn1');
            
            for (item in langArray) {
                $sltLang.append($('<option>' + langArray[item] + '</option>'));
            }
            for (item in themeArray) {
                $sltTheme.append($('<option>' + themeArray[item] + '</option>'));
            }

            $btn1.click(function () {
                var code = $txt1.val(),
                    lang = $sltLang.val(),
                    theme = $sltTheme.val(),
                    highLightCode;

                highLightCode = wangHighLighter.highLight(lang, theme, code);
                $div1.html(highLightCode);
            });

        });
    </script>
</body>
</html>
